<template>
	<view class="nav">
		<view class="" :style="'height:'+statusBarHeight+'rpx;'+containerStyle"></view>
		<view class="navbar" :style="'height:'+systemHeight+'rpx;'+containerStyle"></view>
	</view>
</template>

<script setup>
	import { ref,onBeforeMount,defineProps} from 'vue';
	import { onShow } from "@dcloudio/uni-app";
		
		onBeforeMount(()=>{
			setHight()
			setStyle()
		})
	const props=defineProps({
			background:{
				type:String,
				default:'rgb(255,255,255,1)'	
			},
			color:{
				type:String,
				default:'rgb(0,0,0,1)'
			},
			textSize:{
				type:String,
				default:"32"
			},
			iconWith:{
				type:String,
				default:"116"
			},
			iconHeight:{
				type:String,
				default:"38"
			},
			
		})
	//状态栏高度
	const statusBarHeight=ref(0)	
	//内容高度
	const systemHeight=ref(0)
	//背景颜色
	const containerStyle=ref('')
	//字体
	const textStyle=ref('')
	//图标
	const iconstyle=ref('')
	const setHight=()=>{
	//设备信息	
	let res=uni.getSystemInfoSync()
		statusBarHeight.value=res.statusBarHeight*2
	//设备适配
	if(!res.system.indexOf("iOS")>-1){
		systemHeight.value=96
	}else{
		systemHeight.value=88
	}
	}
	//样式设置
	const setStyle=()=>{
		containerStyle.value=['background:'+props.background].join(';')
		textStyle.value=['font-size:'+props.textSize+'rpx;','color:'+props.color].join(';')
		iconstyle.value=['with'+props.iconWith+'rpx','height'+props.iconHeight+'rpx'].join(';')
	}
		
</script>

<style lang="scss" scoped>
	.nav{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		
	}
</style>


